<template>
    <div>
        <h1>修改</h1>
        <div class="from">
            <div class="left">
                <el-form ref="ruleForm" :model="ruleForm.user" :rules="rules" label-width="120px" class="demo-ruleForm"
                    clearable>
                    <el-form-item label="管理员名称" prop="admin_name">
                        <el-input v-model="user.admin_name" placeholder="请输入管理员名称" clearable />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="user.email" placeholder="请输入邮箱" clearable />
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="user.mobile" placeholder="请输入手机号" clearable />
                    </el-form-item>
                    <el-form-item label="管理员密码" prop="pwd">
                        <el-input type="password" v-model="user.pwd" placeholder="请输入管理员密码" clearable />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repwd">
                        <el-input type="password" v-model="user.repwd" placeholder="请再次输入密码" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <div class="right">
                <el-form ref="ruleForm" :model="ruleForm.user" :rules="rules" label-width="120px" class="demo-ruleForm"
                    clearable>
                    <el-form-item label="真实姓名" prop="real_name">
                        <el-input v-model="user.real_name" placeholder="请输入您的真实姓名" clearable />
                    </el-form-item>
                    <el-form-item label="部门" prop="department">
                        <el-cascader v-model="ruleForm.departments" :options="options" :props="props"
                            placeholder="请选择部门" @change="handleChange" />
                    </el-form-item>
                    <el-form-item label="角色:" prop="roles">
                        <div class="box">
                            <el-checkbox-group v-model="Arr">
                                <el-checkbox v-for="item in role" :key="item" :label="item.id" size="large">{{
                                    item.name
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="user.is_use" class="ml-2" :inactive-value="0" :active-value="1"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(246, 246, 246)" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="user.remarks" autosize type="textarea" placeholder="备注" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="btu">
            <div>
            </div>
            <div>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="updata">修改</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// import { getrolelist, getdepartmentlist, getadmindetails,getadminedit } from '../../../utils/admin'
import http from '../../../api/conser'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
interface IData {
    admin_id: string
    admin_name: string, //管理员名称
    email: string, //邮箱
    mobile: string, //手机号
    is_use: number, //是否启用
    pwd: string, //密码
    repwd: string,//确认密码
    real_name: string,//真实姓名
    wechat: string,
    qq: string,
    remarks: string,//备注
    department: string,//部门
    roles: string//角色id
}
interface Iprops {
    value: string,
    label: string,
    children: string
}
interface IUser {
    user: IData
    panams: any
    role: Array<any>
    departments: Array<any>
    options: Array<any>
    props: Iprops
    Arr: Array<any>
}
const ruleForm = reactive<IUser>({
    user: {
        admin_id: '',
        admin_name: '', //管理员名称
        email: '', //邮箱
        mobile: '', //手机号
        is_use: 1, //是否启用
        pwd: '', //密码
        repwd: '',//确认密码
        real_name: '',//真实姓名
        wechat: '',
        qq: '',
        remarks: '',//备注
        department: '',//部门
        roles: ''//角色id
    },
    panams: { page: 1, pageSize: 100 },
    role: [],
    departments: [],
    options: [],
    props: {
        value: 'id',
        label: 'name',
        children: 'son'
    },
    Arr: []
})
const { user, role, departments, options, props, Arr } = toRefs(ruleForm)
const rules = reactive<FormRules>({
    admin_name: [
        { required: true, message: '请输入管理员名称', trigger: 'blur' },
        // /^1[34578]\d{9}$$/
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: "email", message: '请输入正确的邮箱格式', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        {
            trigger: 'blur',
            validator: (rule, value, callback) => {
                var passwordreg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
                if (!passwordreg.test(value)) {
                    callback(
                        new Error(
                            '目前只支持中国大陆的手机号码!'
                        )
                    )
                } else {
                    callback()
                }
            }
        }

    ],
    pwd: [
        { required: true, message: '密码长度最少5位最多16位', trigger: 'blur' },
    ],
    repwd: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            required: true, validator: (rule, value, callback) => {
                console.log(value);
                if (value === ruleForm.user.pwd) {
                    callback()
                } else {
                    callback(new Error('两次输入密码不一致!'))
                }
            }, trigger: 'blur'
        }
    ],
    real_name: [
        { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
    ],
    department: [
        { required: true, message: '请输选择部门', trigger: 'blur' },
    ],
    roles: [
        { required: true, message: '请选择角色', trigger: 'blur' },
    ],
})
const updata = async() => {
    const res:any = await http.getadminedit(ruleForm.user)
    ruleForm.user.roles = ruleForm.Arr.join()
    if (res.code === 10000) {
        ElMessage({
            message: '修改成功！',
            type: 'success',
        })
        router.push('/admin/list')
    } else {
        ElMessage({
            message: '修改失败',
            type: 'error',
        })
    }
    
}
// 级联框选中
const handleChange = (val: any) => {
    ruleForm.user.department = val[val.length - 1]
}
// 修改
const getdetails = async () => {
    const res: any = await http.getadmindetails({ admin_id: route.query.data })
    console.log(res);
    if (res.code == 10000) {
        ruleForm.user.admin_id = res.data.admin_id
        ruleForm.user.admin_name = res.data.admin_name
        ruleForm.user.mobile = res.data.mobile
        ruleForm.user.pwd = res.data.pwd    
        ruleForm.user.real_name = res.data.real_name
        ruleForm.user.email = res.data.email
        ruleForm.user.remarks = res.data.remarks
        ruleForm.user.department = res.data.department
        ruleForm.user.roles = res.data.roles
        ruleForm.user.repwd = res.data.repwd
        ruleForm.user.is_use = res.data.is_use
        ruleForm.Arr = ruleForm.user.roles.split(',').map(Number)
    }
}
const cancel = () => {
    router.push('/admin/list')
}
// 角色列表
const getList = async () => {
    const res: any = await http.getrolelist(ruleForm.panams)
    if (res.code === 10000) {
        ruleForm.role = res.data.list
    }
}
// 部门列表
const getdepartment = async () => {
    const res: any = await http.getdepartmentlist([])

    if (res.code === 10000) {
        ruleForm.options = res.data[0].son
    }
}

onMounted(() => {
    getList()
    getdepartment()
    getdetails()
})
</script>

<style scoped>
.from {
    width: 100%;
    height: 602px;

    display: flex;
}

.left {
    width: 770px;
    height: 100%;
    /* background-color: blue; */
}

.el-input {
    width: 360px;
    height: 36px !important;
}

.el-form-item {
    margin-top: 30px;
    margin-bottom: 22px;
}

.right {
    flex: 1;
    height: 100%;
}

:deep(.el-input__inner) {
    width: 110px !important;
    height: 26px;
}

.el-checkbox.el-checkbox--large {
    height: 31px;
}

.box {
    width: 480px;
}

:deep(.el-textarea__inner) {
    width: 348px !important;
    height: 105px !important;
    padding: 6px 16px !important;
}

.btu {
    width: 70%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.el-checkbox.el-checkbox--large[data-v-6a32a025] {
    margin-bottom: 10px;
}
</style>